<template>
	<view class="enterprise">	
		
		<u-navbar
			title="企业名片"
			:border-bottom="false"  
		></u-navbar>
		<view class="enterprise__card__top">
			<view class="enterprise__card__top__logo">
				<u-image :src="enterprise.logo"  width="100%" height="100%" ></u-image>
			</view>
			<view class="enterprise__card__top__name">
				{{enterprise.name}}
			</view>
		</view>
		
		<view class="enterprise__card">

			<view class="enterprise__card__info" > 
				<view class="enterprise__card__info__name">企业代码</view>
				<view class="enterprise__card__info__value">{{enterprise.code}}</view>
			</view>
			
			<view class="enterprise__card__info" >
				<view class="enterprise__card__info__name">企业简介</view>
				<view class="enterprise__card__info__value">{{enterprise.briefIntroduction}}</view>
			</view>
			
			<view class="enterprise__card__info" >
				<view class="enterprise__card__info__name">联系方式</view>
				<view class="enterprise__card__info__value">{{enterprise.phone}}</view>
			</view>

			<view class="enterprise__card__info" >
				<view class="enterprise__card__info__name">地址</view>
				<view class="enterprise__card__info__value">{{enterprise.address}}</view>
			</view>
			<view class="enterprise__card__info" >
				<view class="enterprise__card__info__name">公司法人</view>
				<view class="enterprise__card__info__value">{{enterprise.legalPersonName}}</view>
			</view>
			
			<view class="enterprise__card__info" >
				<view class="enterprise__card__info__name">成立日期</view>
				<view class="enterprise__card__info__value">{{enterprise.establishmentDate}}</view>
			</view>
				
<!-- 			<view class="enterprise__card__info" >
				<view class="enterprise__card__info__name">园区Id</view>
				<view class="enterprise__card__info__value">{{enterprise.parkId}}</view>
			</view>
			<view class="enterprise__card__info" >
				<view class="enterprise__card__info__name">房间Id</view>
				<view class="enterprise__card__info__value">{{enterprise.rootId}}</view>
			</view> -->
		</view>
		
		<view class="enterprise__title">
			<view class="enterprise__text">
				公司照片
			</view>
		</view>
		<view class="enterprise__photo-list" v-if="photoList.length<=3">

			<view v-for="(photo,index) in photoList" class="enterprise__photo-list__photo">
				<image :src="photo"mode="widthFix" @click="previewImage(photoList,index)"></image>
			</view>
		</view>
		<view v-else class="enterprise__photo-list" >
			<view v-for="(photo,index) in photoList" v-if="index<2" class="enterprise__photo-list__photo">
				<image 
					:src="photo" 
					mode="widthFix" 
					@click="previewImage(photoList,index)"></image>
			</view>
			<view class="enterprise__photo-list__photo" @click="previewImage(photoList,2)">
				<view class="enterprise__photo-list__photo--more__firstLayer">
					<view  class="enterprise__photo-list__photo--more__firstLayer__text">
						+{{photoList.length-3}}
					</view>
				
				</view>
				<view class="enterprise__photo-list__photo--more__firstLayer">
				</view>
				<image :src="photoList[2]" mode="widthFix" class="enterprise__photo-list__photo--more__imageLayer" style="opacity:0.4;"></image>
			</view>
		</view>
		<view class="enterprise__title">
			<view class="enterprise__text">
				公司简介
			</view>
		</view>
		<view class="enterprise__title">
			<!-- 公司文章 -->
		</view>

		
<!-- 		<view class="enterprise__option">
			<view class="enterprise__option__info" > 
				<view class="enterprise__option__info__name">营业执照</view>
				<view class="enterprise__option__info__value">
					<view class="enterprise__option__info__value__text" @click="previewImage(enterprise.business_linence)">
						查看
					</view>
					<view class="enterprise__option__info__value__icon">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view> -->
			
<!-- 			<view class="enterprise__option__info" >
				<view class="enterprise__option__info__name">法人身份证</view>
				<view class="enterprise__option__info__value">
					<view class="enterprise__option__info__value__text" @click="previewImage(enterprise.business_linence)">
						查看
					</view>
					<view class="enterprise__option__info__value__icon">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			 -->

			
		</view>

	</view>
	
</template>

<script>
	import testData from './enterpriseData.js'
	export default {
		data() {
			return {
				enterprise:"",
				photoList:[
					"http://img.redocn.com/201503/27/4634799_142741827227D7.jpg",
					"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile09.zk71.com%2FFile%2FCorpEditInsertImages%2F2014%2F11%2F04%2F0_wuliu_1317_20141104074214.jpg&refer=http%3A%2F%2Ffile09.zk71.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625202930&t=2d28971177b7427d8d3da4e2ede9ef1c",
					"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.shejiben.com%2Fi%2Fupload%2F2014%2F09%2F01%2F20140901100549-15acfabe-2s.jpg&refer=http%3A%2F%2Fpic.shejiben.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625202993&t=f5fbe9a521b0dda03071104ba91062a5",
					"https://t7.baidu.com/it/u=980142293,2055898712&fm=193&f=GIF",
				]
			}
		},

		onLoad(option){

			let enterpriseId=this.$Route.query.enterpriseId
			console.log("enterpriseId",enterpriseId)
			this.getEnterprise(enterpriseId)
			// 测试数据
			// this.enterprise=testData.enterpriseData
		},
		methods: {
			getEnterprise(enterpriseId){
				let querydata={
					"enterprise_id":enterpriseId
				}
				this.$Axios({
					method:"get",
					url:this.$store.state.baseURL+"/enterprise/get",
					params:querydata,
				}).then((response)=>{
					if(response.data.state=="Success"){
						this.enterprise=response.data.msg;
					}else{
						uni.showToast({
							title:response.data.msg,
							icon:"none",
							duration:2000
						})
					}
				})
			},
			previewImage(urls,current){
				console.log(urls)
				this.logoModal=false
					uni.previewImage({
						loop:true,
						urls: urls,
						current:current
					})
			},
			viewMore(){
				
			}
		}
	}
</script>

<style lang="less">
.enterprise{
	background-color: @uni-bg-color-grey;
	padding-bottom: @uni-spacing-row-lg;
	// background-color: @uni-bg-color-blue;
	// height: calc(100vh);
	&__title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin:0 @uni-spacing-col-x-lg 0 @uni-spacing-col-x-lg;
		&__text{
			font-size: @uni-font-size-sm;
		}
		&__add{
			font-size: @uni-font-size-sm;
			color: @font-color-grey;
		}
	}
	&__card{
		display: flex;
		flex-direction: column;
		margin:@uni-spacing-row-sm @uni-spacing-col-lg;
		padding-top: @uni-spacing-row-lg;
		padding-bottom: @uni-spacing-row-lg;
		border-radius: @border-small;
		background-color: #fff;
		&__top{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: @uni-spacing-row-lg;
			margin-left: @uni-spacing-col-lg;
			&__logo{
				margin-top: @uni-spacing-row-lg;
				width: @uni-img-size-x-lg;
				height: @uni-img-size-x-lg;
			}
			&__name{
				margin-top: @uni-spacing-row-lg;
				margin-left: @uni-spacing-col-base;
				font-weight: bold;
				font-size: @uni-font-size-x-lg;
			}
		}
		&__info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: @uni-spacing-row-lg;
			margin-bottom: @uni-spacing-row-sm;
			margin-left: @uni-spacing-col-xxx-lg;
			margin-right: @uni-spacing-col-xxx-lg;
			&__name{
				color:@font-color-grey;
			}
			&__value{
				
			}
		}

		&__delete{
			align-self: flex-end;
			margin-right: @uni-spacing-col-base;
			padding: 15rpx 20rpx;
			border-radius: 15rpx;
			// background-color: #f5f5f5;
			background-color: #007AFF ;
			color: #fff;
			// color: #007AFF;
			font-weight: lighter;
			font-size: @uni-font-size-sm;
		}
	}
	&__photo-list{
		display: flex;
		flex-direction: row;
		margin:@uni-spacing-row-lg @uni-spacing-col-lg;
		height: 90px;
		// overflow: hidden;
		// background-color: #000;
		&__photo{
				margin-right: @uni-spacing-col-sm;
				width: 100%;
				height: 100px;
				overflow: hidden;
				object-fit: cover;
				position: relative;
			&--more{
				margin-right: @uni-spacing-col-sm;
				width: 100%;
				height: 100px;
				overflow: hidden;
				object-fit: cover;

				&__firstLayer{
					position: absolute;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					z-index: 3;
					&__text{
						font-size: large;
						color: #fff;
					}
				}
				&__secondLayer{
					position: absolute;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					z-index: 2;
					background-color: rgba(0,0,0,0.4);

				}
				&__imageLayer{
					position: absolute;
					z-index: 1;
				}
				
			}
		}
	}
	&__option{
		display: flex;
		flex-direction: column;
		margin:@uni-spacing-row-sm @uni-spacing-col-lg;


		border-radius: @border-small;
		background-color: #fff;
		&__info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: @uni-spacing-row-lg;
			padding-bottom: @uni-spacing-row-sm;
			margin-left: @uni-spacing-col-lg;
			margin-right: @uni-spacing-col-lg;
			padding-left: @uni-spacing-col-lg;
			padding-right: @uni-spacing-col-lg;
			border-bottom: 0.1px solid @uni-border-color;
			&__name{
				color:@font-color-grey;
			}
			&__value{
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: @uni-font-size-base;
				&__icon{
					color:@font-color-grey;
				}
			}
			&--last{
				border-bottom: 0;
			}
		}
		
	}
}	

</style>
